<template>
  <div>
    <ul>
      <li>
        <van-icon name="user-circle-o" size="60px"/>点击登录
      </li>
      <li>
        <div>
          <span>0</span>
          <p>商品收藏</p>
        </div>
        <div>
          <span>0</span>
          <p>浏览记录</p>
        </div>
        <div>
          <span>0</span>
          <p>优惠券</p>
        </div>
      </li>
      <li>
        <van-tabs @click="onClick" background="#e1e1e1">
          <van-tab title="标签 1">内容 1</van-tab>
          <van-tab title="标签 2">内容 2</van-tab>
        </van-tabs>
      </li>
    </ul>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>

ul {
  background: url('https://m.cdfgsanya.com/wap/resources/images/user-bg@2x.9c893f04.png');
  background-size: 100% 100%;
}
ul li span {
  font-size: 18px;
  color: #333;
}
li:nth-child(1){
  height: 105px;
  display: flex;
  align-items: center;
  margin-left: 20px;
}
li:nth-child(2){
  height: 50px;
  display: flex;
  justify-content: space-around;
  text-align: center;
  color: #999;
  font-size: 12px;
}
li:nth-child(2) div {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
li:nth-child(2) div:nth-child(2) {
  position: relative;
}
li:nth-child(2) div:nth-child(2)::before{
  width: 1px;
  height: 50px;
  content: "";
  display: block;
  position: absolute;
  left: -30px;
  border-left: 1px dashed #000;
}
li:nth-child(2) div:nth-child(2)::after{
  width: 1px;
  height: 50px;
  content: "";
  display: block;
  position: absolute;
  left: 75px;
  border-right: 1px dashed #000;
}
</style>